<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        
        li {
            list-style: none;
        }
        
        .top {
            display: flex;
            height: 40px;
            text-align: center;
            line-height: 40px;
        }
        
        .top div:nth-child(1) {
            position: relative;
            width: 50px;
        }
        
        .top div:nth-child(1)::before {
            content: '';
            position: absolute;
            top: 13px;
            left: 21px;
            width: 15px;
            height: 15px;
            border-top: 1px solid #000;
            border-left: 1px solid #000;
            transform: rotate(315deg);
        }
        
        .top div:nth-child(2) {
            flex: 1;
        }
        
        .top div:nth-child(3) {
            width: 50px;
            color: #27aedd;
        }
        
        .navbar {
            margin-top: 30px;
            width: 100%;
            height: 150px;
            background-color: #f6f5fa;
            text-align: center;
        }
        
        .title {
            padding-top: 10px;
            font-size: 18px;
            font-weight: 700;
        }
        
        .bar-center {
            display: flex;
            height: 80px;
            font-size: 12px;
            color: #999;
        }
        
        .bar-center div {
            flex: 1;
        }
        
        .bar-center div p {
            text-align: left;
            padding: 8px 0 0 20px;
        }
        
        .bar-center div p .underLine {
            text-decoration: underline;
            color: tomato;
        }
        
        .bar-center .shenqing p {
            text-align: center !important;
        }
        
        .info {
            font-size: 16px;
            color: #999;
            font-weight: 700;
            text-align: left;
            padding-left: 20px;
        }
        
        .info-center ul li {
            height: 35px;
            margin: 0 15px;
            border-top: 1px solid #eee;
            line-height: 35px;
            font-size: 12px;
        }
        
        .info-center ul li span:nth-child(1) {
            color: #ccc;
        }
        
        .info-center ul li span:nth-child(2) {
            float: right;
        }
        
        .showtime {
            height: 80px;
            background-color: #f6f5fa;
        }
        
        .showtime p {
            font-size: 22px;
            text-align: center;
            padding-top: 10px;
            color: #0a7a0a;
        }
        
        .showtime div {
            text-align: center;
            color: #ea0a0b;
            font-size: 18px;
            font-weight: 400;
        }
        
        .chuxing ul li {
            height: 35px;
            margin: 0 15px;
            border-top: 1px solid #eee;
            line-height: 35px;
            font-size: 12px;
        }
        
        .chuxing ul li span:nth-child(2) {
            float: right;
        }
        
        .chuxing ul li span:nth-child(2) input {
            position: relative;
        }
        
        .checked:after {
            position: absolute;
            width: 5px;
            height: 11px;
            top: 0;
            content: " ";
            background-color: #888;
            color: #fff;
            display: inline-block;
            visibility: visible;
            padding: 0px 3px;
            border-radius: 50%;
        }
        
        .reason {
            padding: 10px 10px;
            border-top: 1px solid #eee;
        }
        
        .promise {
            display: flex;
            padding: 10px 10px;
        }
        
        .yes {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            text-align: center;
            background-color: #4e4eff;
            color: #fff;
            margin: 10px 20px 0 0;
        }
        
        .chengluo {
            flex: 1;
            color: #ea0a0b;
        }
        
        .bottom {
            background-color: #f6f5fa;
        }
        
        .bottom p {
            font-size: 18px;
            color: #ea0a0b;
            padding-bottom: 5px;
        }
        
        .bottom div div span:nth-child(1) {
            color: green;
        }
        
        button {
            margin-top: 200px;
        }
    </style>
</head>

<body>

    <div class="top">
        <div></div>
        <div>我的事务</div>
        <div>关闭</div>
    </div>
    <div class="navbar">
        <div class="title">学生出入校申请 (市内一天)</div>
        <div class="bar-center">
            <div>
                <p>当前处理人：<span class="changeName">周刘星</span></p>
                <p>当前状态：学生申请</p>
                <p>流转记录：<span class="underLine">查看流转记录</span></p>
            </div>
            <div class="shenqing">
                <p>申请时间：<span class="now_time"></span></p>
                <p>申请者：<span class="changeName"></span></p>
                <p>图形监控：<span class="underLine">查看流程图</span></p>
            </div>
        </div>
        <div class="info">个人基本信息</div>
    </div>
    <div class="info-center">
        <ul>
            <li><span>录取号</span><span>202040069</span></li>
            <li><span>学号</span><span>032020311</span></li>
            <li><span>姓名</span><span class="changeName">周刘星</span></li>
            <li><span>性别</span><span class="changeSex">男</span></li>
            <li><span>学院</span><span>信息工程学院</span></li>
            <li><span>寝室号</span><span>达人1栋-104</span></li>
            <li><span>申请时间</span><span class="now_time"></span></li>
            <li><span>* 联系电话</span><span>15090834660</span></li>
        </ul>
    </div>
    <div class="showtime">
        <p>允许通行</p>
        <div>当前时间：<span class="run"></span></div>
    </div>
    <div class="chuxing">
        <ul>
            <li><span>* 出行开始时间</span><span class="now_time"></span></li>
            <li><span>* 出行结束时间</span><span class="delay_time"></span></li>
            <li><span>* 是否有课</span><span><input type="radio">是<input type="radio" checked="true" class="checked">否</span></li>
        </ul>
    </div>
    <div class="reason">
        * 外出事由<br/>出去买东西
        <div>* 预计路线<br/>民大附近</div>
    </div>
    <div class="promise">
        <div class="yes">✔</div>
        <div class="chengluo">本人承诺：以上表格所填写的内容完全属实，如有隐瞒、伪造、一切责任自负。</div>
    </div>
    <div class="bottom">
        <div>
            <p>审批记录</p>
            <div>学生申请<span>周刘星/教学单位/信息工程学院</span><span class="now_time"></span></div>
        </div>
        <div>
            <p>同意</p>
            <div>班主任、辅导员审批<span>陶勇/教学单位/信息工程学院</span class="now_time"><span></span></div>
        </div>
    </div>

    <button>切换</button>


    <script>
        // var nowTime = +new Date();
        // console.log(time);


        // function getTime(time) {
        //     var time = time / 1000;
        //     var h = parseInt(time / 60 / 60 % 24);
        //     h = h < 10 ? '0' + h : h;
        //     var m = parseInt(time / 60 % 60);
        //     var s = parseInt(time % 60);
        //     console.log(h + '-' + m + '-' + s);
        // }

        var spans = document.querySelectorAll('.now_time');
        var run = document.querySelector('.run');
        var delay = document.querySelector('.delay_time');
        var names = document.querySelectorAll('.changeName');
        var sex = document.querySelector('.changeSex');
        var btn = document.querySelector('button');
        //切换性格 姓名
        let flag = true;
        btn.addEventListener('click', () => {

            if (flag) {
                for (let item of names) {
                    item.innerHTML = '刘蕾'
                }
                sex.innerHTML = '女';
                flag = !flag;
            } else {
                for (let item of names) {
                    item.innerHTML = '周刘星'
                }
                sex.innerHTML = '男';
                flag = !flag;
            }

        })


        setInterval(function getTime() {
            var date = new Date();
            var time = +new Date();
            time = time % 1000;
            // console.log(date);
            // console.log(time);
            var year = date.getFullYear();
            var month = date.getMonth() + 1;
            month = month < 10 ? '0' + month : month;
            var day = date.getDate();
            day = day < 10 ? '0' + day : day;
            var h = date.getHours();
            h = h < 10 ? '0' + h : h;
            var m = date.getMinutes();
            m = m < 10 ? '0' + m : m;
            var s = date.getSeconds();
            s = s < 10 ? '0' + s : s;

            var delay_day = day + 1;

            for (let item of spans) {
                item.innerHTML = year + '-' + month + '-' + day + ' ' + h + ':' + m;
            }
            run.innerHTML = year + '-' + month + '-' + day + ' ' + h + ':' + m + ':' + s + ':' + time;
            delay.innerHTML = year + '-' + month + '-' + delay_day + ' ' + h + ':' + m;

        }, 1)
    </script>
</body>

</html>